<template>
  <div class="chartsCondition">
    <div class="shade" :class="{ dispalynone: shadeDisplay }"></div>
    <el-form
      ref="chartsConForm"
      class="chartsConForm"
      size="mini"
      :model="chartsConData"
      label-width="100px"
    >
      <el-form-item label="主标题：">
        <el-input
          v-model="chartsConData.title"
          @input="setConData({ title: chartsConData.title })"
        ></el-input>
      </el-form-item>
      <el-form-item label="副标题：">
        <el-input
          v-model="chartsConData.subtitle"
          @input="setConData({ subtitle: chartsConData.subtitle })"
        ></el-input>
      </el-form-item>
      <el-form-item label="标题位置：">
        <el-select
          v-model="chartsConData.titleLocation"
          @change="setConData({ titleLocation: chartsConData.titleLocation })"
        >
          <el-option label="上方" value="top"></el-option>
          <el-option label="下方" value="bottom"></el-option>
          <el-option label="左侧" value="left"></el-option>
          <el-option label="右侧" value="right"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="文本大小："
        v-if="
          chartsConData.ways !== '3' &&
            chartsConData.ways !== '6' &&
            chartsConData.type !== '5'
        "
      >
        <el-input-number
          v-model="chartsConData.textSize"
          controls-position="right"
          @change="handleCondition({ textSize: chartsConData.textSize })"
          :min="12"
          :max="50"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="文本偏移："
        v-if="
          (chartsConData.ways === '1' && chartsConData.type === '1') ||
            (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type == '3') ||
            (chartsConData.ways === '5' && chartsConData.type === '1')
        "
      >
        <el-input-number
          v-model="chartsConData.offset"
          controls-position="right"
          @change="handleCondition({ offset: chartsConData.offset })"
          :min="-500"
          :max="500"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        v-if="
          chartsConData.ways !== '3' &&
            chartsConData.ways !== '6' &&
            chartsConData.type !== '5' &&
            chartsConData.type1 !== 'd2'
        "
        label="图例："
      >
        <el-radio-group
          v-model="chartsConData.legend"
          @change="handleCondition({ legend: chartsConData.legend })"
        >
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="
          chartsConData.ways !== '3' &&
            chartsConData.ways !== '6' &&
            chartsConData.type !== '5' &&
            chartsConData.type1 !== 'd1' &&
            chartsConData.type1 !== 'd2' &&
            chartsConData.legend === '1'
        "
        label="图例位置："
      >
        <el-select
          v-model="chartsConData.legendPosition"
          @change="
            handleCondition({ legendPosition: chartsConData.legendPosition })
          "
        >
          <el-option label="底部" value="bottom"></el-option>
          <el-option label="顶部" value="top"></el-option>
          <el-option label="左侧" value="left"></el-option>
          <el-option label="右侧" value="right"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="图例偏移："
        v-if="
          chartsConData.ways !== '3' &&
            chartsConData.ways !== '6' &&
            chartsConData.type !== '5' &&
            chartsConData.type1 !== 'd2' &&
            chartsConData.type1 !== 'd1' &&
            chartsConData.legend === '1'
        "
      >
        <el-form-item label="X：" label-width="45">
          <el-input-number
            title="若图例位置选择为右侧，偏移量要设置负值！"
            v-model="chartsConData.legendOffsetX"
            controls-position="right"
            @change="
              handleCondition({ legendOffsetX: chartsConData.legendOffsetX })
            "
          ></el-input-number>
        </el-form-item>
        <el-form-item label="Y：" label-width="45">
          <el-input-number
            v-model="chartsConData.legendOffsetY"
            controls-position="right"
            @change="
              handleCondition({ legendOffsetY: chartsConData.legendOffsetY })
            "
          ></el-input-number>
        </el-form-item>
      </el-form-item>
      <el-form-item
        v-if="
          (chartsConData.ways === '1' && chartsConData.type === '1') ||
            (chartsConData.ways === '5' && chartsConData.type === '1')
        "
        label="数值显示："
      >
        <el-select
          v-model="chartsConData.percent"
          @change="handleCondition({ percent: chartsConData.percent })"
        >
          <el-option label="显示百分比" value="1"></el-option>
          <el-option label="显示数值" value="0"></el-option>
          <el-option label="显示百分比和数值" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="精确度："
        v-if="
          (chartsConData.ways === '1' && chartsConData.type === '1') ||
            (chartsConData.ways === '5' && chartsConData.type === '1')
        "
      >
        <el-input-number
          v-model="chartsConData.precision"
          controls-position="right"
          @change="handleCondition({ precision: chartsConData.precision })"
          :min="0"
          :max="10"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="图表宽度："
        v-if="
          (chartsConData.ways === '1' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3') ||
            (chartsConData.ways === '5' && chartsConData.type !== '1')
        "
      >
        <el-input-number
          v-model="chartsConData.canvasWidth"
          controls-position="right"
          @change="handleCanvasAttr({ canvasWidth: chartsConData.canvasWidth })"
          :min="0"
          :max="chartsConData.chartsMaxWidth"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="图表高度："
        v-if="
          (chartsConData.ways === '1' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3') ||
            (chartsConData.ways === '5' && chartsConData.type !== '1')
        "
      >
        <el-input-number
          v-model="chartsConData.canvasHeight"
          controls-position="right"
          @change="
            handleCanvasAttr({ canvasHeight: chartsConData.canvasHeight })
          "
          :min="0"
          :max="chartsConData.chartsMaxHeight"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        :label="chartsConData.type1 === 'z4' ? '横坐标单位' : '纵坐标单位'"
        v-if="
          (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3') ||
            (chartsConData.ways === '5' && chartsConData.type !== '1')
        "
      >
        <el-input
          style="width:130px;"
          v-model="chartsConData.valueUnit"
          @input="handleCondition({ valueUnit: chartsConData.valueUnit })"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="chartsConData.type1 === 'z4' ? '纵坐标单位' : '横坐标单位'"
        v-if="
          (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3') ||
            (chartsConData.ways === '5' && chartsConData.type !== '1')
        "
      >
        <el-input
          style="width:130px;"
          v-model="chartsConData.timeUnit"
          @input="
            handleCondition({
              timeUnit: chartsConData.timeUnit,
              timeUnitFlag: true
            })
          "
        ></el-input>
      </el-form-item>
      <el-form-item
        label="图表内间距："
        v-if="
          (chartsConData.ways === '1' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3') ||
            (chartsConData.ways === '5' && chartsConData.type !== '1')
        "
      >
        <el-form-item label="上：" label-width="20px">
          <el-input-number
            v-model="chartsConData.canvasTopPad"
            controls-position="right"
            @change="
              handleCondition({ canvasTopPad: chartsConData.canvasTopPad })
            "
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="右：" label-width="20px">
          <el-input-number
            v-model="chartsConData.canvasRightPad"
            controls-position="right"
            @change="
              handleCondition({ canvasRightPad: chartsConData.canvasRightPad })
            "
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="下：" label-width="20px">
          <el-input-number
            v-model="chartsConData.canvasBottomPad"
            controls-position="right"
            @change="
              handleCondition({
                canvasBottomPad: chartsConData.canvasBottomPad
              })
            "
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="左：" label-width="20px">
          <el-input-number
            v-model="chartsConData.canvasLeftPad"
            controls-position="right"
            @change="
              handleCondition({ canvasLeftPad: chartsConData.canvasLeftPad })
            "
            :min="0"
          ></el-input-number>
        </el-form-item>
      </el-form-item>
      <el-form-item
        label="刻度点个数："
        v-if="
          (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3') ||
            (chartsConData.ways === '5' && chartsConData.type !== '1')
        "
      >
        <el-input
          style="width:130px;"
          v-model.number="chartsConData.tickCount"
          placeholder="自适应"
          @change="handleCondition({ tickCount: chartsConData.tickCount })"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="
          (chartsConData.ways === '5' && chartsConData.type1 === 'z2') ||
            (chartsConData.ways === '5' && chartsConData.type1 === 'z3') ||
            (chartsConData.ways === '5' && chartsConData.type1 === 'l1') ||
            (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3')
        "
        label="时间格式："
      >
        <el-select
          v-model="chartsConData.dateFormat"
          @change="handleCondition({ dateFormat: chartsConData.dateFormat })"
        >
          <el-option label="YYYY年M月D日 H时" value="1"></el-option>
          <el-option label="YYYY/M/D Hh" value="2"></el-option>
          <!-- <el-option label="YYYY/M/D H1 H2 H3……" value="3"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item
        label="年"
        v-if="
          (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3') ||
            (chartsConData.ways === '5' && chartsConData.type !== '1')
        "
      >
        <el-radio-group
          v-model="chartsConData.showYear"
          @change="
            handleCondition({
              showYear: chartsConData.showYear,
              timeUnitFlag: false
            })
          "
        >
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="月"
        v-if="
          (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3') ||
            (chartsConData.ways === '5' && chartsConData.type !== '1')
        "
      >
        <el-radio-group
          v-model="chartsConData.showMonth"
          @change="
            handleCondition({
              showMonth: chartsConData.showMonth,
              timeUnitFlag: false
            })
          "
        >
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="日"
        v-if="
          chartsConData.unit !== '3' &&
            ((chartsConData.ways === '2' && chartsConData.type === '2') ||
              (chartsConData.ways === '2' && chartsConData.type === '3') ||
              (chartsConData.ways === '5' && chartsConData.type !== '1'))
        "
      >
        <el-radio-group
          v-model="chartsConData.showDay"
          @change="
            handleCondition({
              showDay: chartsConData.showDay,
              timeUnitFlag: false
            })
          "
        >
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="时"
        v-if="
          chartsConData.unit === '2' &&
            ((chartsConData.ways === '2' && chartsConData.type === '2') ||
              (chartsConData.ways === '2' && chartsConData.type === '3') ||
              (chartsConData.ways === '5' && chartsConData.type !== '1'))
        "
      >
        <el-radio-group
          v-model="chartsConData.showHour"
          @change="
            handleCondition({
              showHour: chartsConData.showHour,
              timeUnitFlag: false
            })
          "
        >
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="统计方式：">
        <el-select
          v-model="chartsConData.ways"
          placeholder="请选择"
          @change="setConData({ ways: chartsConData.ways }, 3)"
        >
          <el-option label="媒体来源" value="1"></el-option>
          <el-option label="发布时间" value="2"></el-option>
          <el-option label="发布量" value="3"></el-option>
          <el-option label="舆情地图" value="4"></el-option>
          <el-option label="情感" value="5"></el-option>
          <el-option label="关键词" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-show="
          (chartsConData.ways === '5' && chartsConData.type1 === 'z2') ||
            (chartsConData.ways === '5' && chartsConData.type1 === 'z3') ||
            (chartsConData.ways === '5' && chartsConData.type1 === 'l1') ||
            (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3')
        "
        label="统计单位："
      >
        <el-select
          v-model="chartsConData.unit"
          placeholder="请选择"
          @change="
            handleUnit({ unit: chartsConData.unit, timeUnitFlag: false })
          "
        >
          <el-option label="天" value="1"></el-option>
          <el-option label="小时" value="2"></el-option>
          <el-option label="月" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-show="
          (chartsConData.ways === '5' && chartsConData.type1 === 'z2') ||
            (chartsConData.ways === '5' && chartsConData.type1 === 'z3') ||
            (chartsConData.ways === '5' && chartsConData.type1 === 'l1') ||
            (chartsConData.ways === '2' && chartsConData.type === '2') ||
            (chartsConData.ways === '2' && chartsConData.type === '3')
        "
        label="聚合输出："
      >
        <el-input-number
          v-model="chartsConData.mergeNum"
          controls-position="right"
          @change="setConData({ mergeNum: chartsConData.mergeNum }, 3)"
          :min="1"
          :max="500"
        ></el-input-number>
      </el-form-item>

      <el-form-item
        v-show="chartsConData.ways === '3' && chartsConData.type === '5'"
        label="默认数量："
      >
        <el-input
          style="width:130px;"
          v-model.number="chartsConData.siteCount"
          @change="setConData({ siteCount: chartsConData.siteCount }, 3)"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        v-show="chartsConData.ways === '6' && chartsConData.type === '5'"
        label="默认数量："
      >
        <el-input
          style="width:130px;"
          v-model.number="chartsConData.keywordNum"
          type="number"
          @change="setConData({ keywordNum: chartsConData.keywordNum }, 3)"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        v-show="
          (chartsConData.ways === '3' && chartsConData.type === '5') ||
            (chartsConData.ways === '6' && chartsConData.type === '5')
        "
        label="背景："
      >
        <el-radio-group
          v-model="chartsConData.bagShow"
          @change="handleCondition({ bagShow: chartsConData.bagShow })"
        >
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-show="
          (chartsConData.ways === '3' && chartsConData.type === '5') ||
            (chartsConData.ways === '6' && chartsConData.type === '5')
        "
        label="矢量背景图："
      >
        <el-select
          v-model="chartsConData.svg"
          @change="handleCondition({ svg: chartsConData.svg })"
        >
          <el-option
            v-for="item in imgsvg"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-show="
          chartsConData.bagShow === '1' &&
            ((chartsConData.ways === '3' && chartsConData.type === '5') ||
              (chartsConData.ways === '6' && chartsConData.type === '5'))
        "
        label="背景颜色："
      >
        <el-color-picker
          v-model="chartsConData.svgColor"
          :predefine="predefineColors"
          @change="handleCondition({ svgColor: chartsConData.svgColor })"
        >
        </el-color-picker>
      </el-form-item>
      <el-form-item
        label="文字重复"
        v-if="
          (chartsConData.ways === '3' && chartsConData.type === '5') ||
            (chartsConData.ways === '6' && chartsConData.type === '5')
        "
      >
        <el-radio-group
          v-model="chartsConData.repeat"
          @change="handleCondition({ repeat: chartsConData.repeat })"
        >
          <el-radio label="1">重复</el-radio>
          <el-radio label="0">不重复</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-show="chartsConData.ways === '4' && chartsConData.type === '4'"
        label="地域选择："
      >
        <el-select
          v-model="chartsConData.statAreaAttr"
          @change="setConData({ statAreaAttr: chartsConData.statAreaAttr }, 2)"
        >
          <el-option label="中国" value="380"></el-option>
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id.toString()"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="
          chartsConData.ways === '4' &&
            chartsConData.type === '4' &&
            chartsConData.statAreaAttr === '380'
        "
        label="九段线缩略图："
      >
        <el-radio-group
          v-model="chartsConData.thumbnail"
          @change="handleCondition({ thumbnail: chartsConData.thumbnail })"
        >
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="chartsConData.ways === '4' && chartsConData.type === '4'"
        label="省市显示："
      >
        <el-radio-group
          v-model="chartsConData.cityShow"
          @change="handleCondition({ cityShow: chartsConData.cityShow })"
        >
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">不显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        class="legend changeStyle"
        label="图例范围："
        v-show="
          chartsConData.legend === '1' &&
            chartsConData.ways === '4' &&
            chartsConData.type1 === 'd1'
        "
      >
        <el-form-item
          v-for="item in chartsConData.areaRange"
          :key="item.id"
          label-width="0"
        >
          <p>
            <el-input
              style="width:191px;margin-bottom:8px;"
              v-model="item.text"
            >
            </el-input>
          </p>
          <el-input style="width:60px;" v-model.number="item.start"></el-input>
          -
          <el-input style="width:60px;" v-model.number="item.end"></el-input>
          <el-button
            icon="el-icon-minus"
            @click="handleDecrease(item.id)"
          ></el-button>
        </el-form-item>
        <el-form-item class="changeStyle">
          <el-button icon="el-icon-plus" @click="handleIncrease()"></el-button>
          <el-button
            class="confirmBtn"
            @click="
              handleCondition(
                {
                  areaRange: chartsConData.areaRange
                },
                'areaRange'
              )
            "
            >确定</el-button
          >
        </el-form-item>
      </el-form-item>
      <el-collapse class="modify" v-model="activeNames">
        <div class="edit-btn changeStyle">
          <el-button
            size="mini"
            icon="el-icon-edit-outline"
            type="text"
            @click="openDialog"
            style="margin-right:3%;"
            class="confirmBtn"
            >编辑数据</el-button
          >
        </div>
        <el-collapse-item title="查看数据" name="1">
          <showData></showData>
        </el-collapse-item>
      </el-collapse>
      <el-form-item label-width="0">
        <tablevxe></tablevxe>
      </el-form-item>
    </el-form>
    <chartsDialog @renderData="renderData" :show.sync="show"> </chartsDialog>
  </div>
</template>
<script>
import { chartEncaps } from '@/components/chartsType/chartEncaps/chartEncaps.js'
import chartsDialog from '@/components/chartsType/chartsDialog'
import tablevxe from '@/components/chartsType/vxeTable'
import { mapState, mapMutations, mapActions } from 'vuex'
import showData from './showData'

export default {
  name: 'chartsCondition',
  props: {
    activeName: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      chartsTableData: [], // 图表数据（非发布时间）
      activeNames: ['1'], // 当前展开的菜单
      bodyMenus: [
        // 表格右键单击快捷菜单
        [
          {
            code: 'insertAt',
            name: '最后一行插入'
          },
          {
            code: 'remove',
            name: '删除'
          }
        ]
      ],
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585'
      ],
      showLabel: {
        // 显示数据表格的表头内容
        x: '',
        y: '',
        z: ''
      },
      showArray: [], // 表格数据（统计方式为发布时间）
      showLabel2: [], // 显示数据表格的表头内容
      showKey1: false, // 每种统计方式对应显示的表头的内容不一样，故分为四个表格显示
      showKey2: false,
      showKey3: false,
      showKey4: false,
      xTable: '', // 当前显示的表格table
      show: false, // 决定编辑数据弹窗的显示隐藏
      imgsvg: [
        // 矢量背景图
        {
          label: '心形',
          id: 'cloud1'
        },
        {
          label: '中国地图',
          id: 'cloud2'
        },
        {
          label: '五角形',
          id: 'cloud3'
        },
        {
          label: '云',
          id: 'cloud4'
        }
      ]
    }
  },
  methods: {
    // 统计单位改变时
    handleUnit(data) {
      this.setMergeNum()
      this.setConData(data, 3)
    },
    renderData() {
      this.$emit('rePaint')
    },
    // 减少图例
    handleDecrease(id) {
      let areaRange = [...this.chartsConData.areaRange]
      let index = areaRange.findIndex(item => item.id === id)
      areaRange.splice(index, 1)
      this.handleCondition({
        areaRange: areaRange
      })
    },
    // 增加图例
    handleIncrease() {
      let areaRange = [...this.chartsConData.areaRange]
      areaRange.push({ start: 0, end: 0, text: '' })
      this.handleCondition({
        areaRange: areaRange
      })
    },
    // 改变柱状图和折线图得宽度高度
    handleCanvasAttr(data) {
      this.setChartsConData({ autoFit: false })
      this.setConData(data)
    },
    // 点击编辑数据
    openDialog() {
      this.setResettdata(false)
      this.show = true
    },
    handleCondition(data) {
      if (arguments[1]) {
        arguments[1] === 'areaRange' && this.setChangeArea(false)
        this.svgColor =
          arguments[1] === 'bagShow' ? this.chartsConData.svgColor : '#eee'
      }
      this.setConData(data)
    },
    // 重新请求数据
    setConData(data, flag) {
      let _this = this
      this.setChartsConData(data)
      this.setLoading(true)
      this.setshadeDisplay(true)
      switch (flag) {
        case 2:
          this.dispatchNewData({
            vm: this,
            type: Number(this.chartsConData.type),
            axios: this.$axios
          }).then(res => {
            _this.setDrawFlag()
          })
          break
        case 3:
          this.setLoading(true)
          this.setshadeDisplay(false)
          if (chartEncaps.ifDraw({ _t: this })) {
            this.dispatchNewData({
              vm: this,
              type: Number(this.chartsConData.type),
              axios: this.$axios
            }).then(res => {
              _this.setDrawFlag()
            })
          } else {
            this.$emit('clearHtml')
            this.$confirm('提示', {
              title: '提示',
              message: '当前统计方式不支持此图标类型展示，请重新选择。',
              showCancelButton: false,
              confirmButtonText: '确定',
              type: 'warning'
            }).then(() => {
              this.setLoading(false)
              this.setshadeDisplay(true)
            })
          }
          break
        default:
          this.setDrawFlag()
      }
    },
    // 首次加载数据
    findList() {
      this.$nextTick(function() {
        if (this.showKey1 || this.showKey2 || this.showKey3) {
          this.chartsTableData = [...this.chartData]
        }
      })
    },
    ...mapMutations('charts', [
      'setchangeChartsData',
      'setChartsConData',
      'setIndex',
      'setshadeDisplay',
      'setDrawFlag',
      'setChangeArea',
      'setResettdata',
      'setLoading',
      'setMergeNum'
    ]),
    ...mapActions('charts', ['dispatchNewData'])
  },
  computed: {
    ...mapState('charts', [
      'chartData',
      'chartsConData',
      'areaList',
      'index',
      'shadeDisplay',
      'changeArea'
    ])
  },
  components: {
    showData,
    chartsDialog,
    tablevxe
  },
  mounted() {
    this.findList()
    this.setIndex(0)
  },
  watch: {
    chartsTableData: {
      handler(newval) {
        this.setchangeChartsData(newval)
      },
      deep: true
    }
  }
}
</script>
<style>
.chartsCondition .el-button > span {
  display: inline-block;
}
.vxe-table.border--full .vxe-body--column,
.vxe-table.border--full .vxe-footer--column,
.vxe-table.border--full .vxe-header--column {
  background-image: linear-gradient(#44586f, #44586f),
    linear-gradient(#44586f, #44586f);
}
.vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line {
  border-bottom-color: #44586f;
}
.vxe-table .vxe-table--border-line {
  border-color: #44586f;
}
</style>
<style>
.chartsCondition .changeStyle .el-button {
  background-color: #2b3a52;
  border: 1px solid #2b3a52;
  color: #fff;
}
.chartsCondition .el-button.confirmBtn {
  color: #409eff;
  padding: 7px 15px;
}
.chartsCondition .el-button--mini,
.el-button--mini.is-round {
  padding: 7px 8px;
}
.chartsCondition .legend .el-input__inner {
  padding: 0 2px;
  text-align: center;
}
.chartsCondition .legend .el-input__inner:hover {
  background-color: #2b3a52;
}
</style>
<style scoped>
.vxe-table--body {
  width: 100%;
}
.chartsCondition {
  position: relative;
  margin: 15px;
}
.addRow {
  float: right;
  margin-top: 10px;
}
.modify {
  position: relative;
}
.edit-btn {
  position: absolute;
  top: 0;
  right: 30px;
  font-weight: bold;
}
.el-icon-delete {
  width: 100%;
  line-height: unset !important;
  cursor: pointer;
}
.dispalynone {
  display: none;
}
.shade {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #2b3a52;
  opacity: 0.5;
  z-index: 100;
}
.my-sort .custom-sort {
  padding: 0 4px;
}
.my-sort .custom-sort.is-order {
  color: #fff;
  display: inline-block;
}
.el-icon-top,
.el-icon-bottom {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  width: 10px;
  height: 14px;
}
</style>
